.p-ballot {
  .content {
    display: flex;
    min-height: calc(100vh - 168px - 0.5rem);
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.25rem;
    gap: 4rem;

    .content-left {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr 1fr;
      column-gap: 0.2rem;
      width: calc(45% - 5rem);
      height: 100%;
      gap: 0.15rem 1rem;
      min-width: 0;

      .item {
        display: flex;
        align-items: center;
        font-size: 2rem;
        color: #fff;
        font-family: 'msyhbd';
        overflow: hidden;

        .order {
          display: flex;
          align-items: center;
          width: calc(16% - 1rem);
          justify-content: center;
          background-image: url('@/assets/img/scb/order-bg.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          height: 100%;
          margin-right: 0.5rem;
          margin-bottom: 5px;
          flex: 0 0 16%;
        }

        .item-wrap {
          height: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;

          .detail {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: calc(100% - 5px);
            background-image: url('@/assets/img/scb/bg-line1.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            padding: 0 0.7rem;
          }

          .border {
            height: 4px;
            background-image: url('@/assets/img/scb/line-divide.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }

    .content-right {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr 1fr;
      column-gap: 0.2rem;
      width: calc(55% - 5rem);
      height: 100%;
      gap: 0.15rem 1rem;

      .item {
        display: flex;
        align-items: center;
        font-size: 2rem;
        color: #fff;
        font-family: 'msyhbd';
        overflow: hidden;
        min-width: 0;

        .order {
          display: flex;
          align-items: center;
          width: calc(15% - 1rem);
          justify-content: center;
          background-image: url('@/assets/img/scb/order-bg.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          height: 100%;
          margin-right: 0.5rem;
          margin-bottom: 5px;
          flex: 0 0 15%;
        }

        .item-wrap {
          height: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;

          .detail {
            display: flex;
            align-items: center;
            height: calc(100% - 5px);
            background-image: url('@/assets/img/scb/bg-line1.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            padding: 0 0.7rem;
            justify-content: space-between;
          }

          .border {
            height: 4px;
            background-image: url('@/assets/img/scb/line-divide.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }

    .count-more {
      grid-template-rows: repeat(15, calc((100vh - 168px - 7rem) / 14));
    }
  }
}